<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic Layout - jQuery EasyUI Demo</title>
    <script type="text/javascript" src="../static/easyui/jquery.min.js"></script>
    <!--EasyUI CSS样式表-->
    <link rel="stylesheet" type="text/css" href="../static/easyui/themes/green/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="../static/easyui/themes/icon.css"/>
    <!--EasyUI JS文件-->
    <script type="text/javascript" src="../static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../static/js/datagrid.js"></script>
    <link rel="stylesheet" type="text/css" href="../static/css/nav.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/xueyuan.css"/>
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_521438_x26955ilvidiy66r.css"/>
    <script type="text/javascript" src="../static/js/xueyuan.js"></script>
</head>
<body>
<table id="stree2" style="height: 50%"></table>
<script>
    $(function () {
        active['checkboxChange'].call($(this), $(this));
        var editRowId;
        $('#stree2').treegrid({
            url: 'test.json',
            idField: 'id',//设置主键
            treeField: 'name',//设置显示树的字段
            fitColumns: true,//自适应宽度
            checkOnSelect: false,//如果为true，当用户点击行的时候该复选框就会被选中或取消选中。如果为false，当用户仅在点击该复选框的时候才会呗选中或取消。
            selectOnCheck: false,//如果为true，单击复选框将永远选择行。如果为false，选择行将不选中复选框。
            rownumbers: false,//显示行号
            onlyLeafCheck: true,//定义是否仅在叶子节点前显示复选框
            animate: true,//展开关闭时是否有动画效果
            fit: true,//自适应父容器
            autoRowHeight: false,
            cascadeCheck: false,
            nowrap: false,
            columns: [[
                {field: 'id', checkbox: true},
                {field: 'name', title: '资源', width: 100},
                {
                    field: 'resource', title: '权限', width: 200,
                    formatter: function (value, row, index) {
                        value = `<label><input type="checkbox" /><i class="iconfont icon-touming"></i>读书</label>
                                 <label><input type="checkbox" /><i class="iconfont icon-touming"></i>阅读</label>`;
                        return value;
                    }
                }
            ]],
        });
    })

</script>
</body>
</html>